<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>

<table id="book-table">
    <thead>
    <tr>
        <th>书名</th>
        <th>借阅时间</th>
        <th>归还时间</th>
        <th>归还操作</th>
        <th>删除记录</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="findBorrowRecord: ${findBorrowRecord}">
        <th th:text="${findBorrowRecord.book_name}"></th>
        <th th:text="${findBorrowRecord.borrow_date}"></th>
        <th th:text="${findBorrowRecord.return_date}"></th>

        <th>
            <form action="/replyBorrowRecord" method="post" >
                <button type="submit" name="borrow_id" id="borrow-btn" class="button_return" th:value="${findBorrowRecord.borrow_id}" >归还</button>
            </form>
        </th>

        <th>
            <form action="/deleteBorrowRecord" method="post" >

                <button type="submit" name="borrow_id" th:value="${findBorrowRecord.borrow_id}" class="noselect button_delete"><span class="text">Delete</span><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg></span></button>
            </form>
        </th>

    </tr>
</table>
<script>
    // 通过ID获取借阅按钮
    var borrowBtn = document.getElementById("borrow-btn");

    // 给借阅按钮绑定一个点击事件
    borrowBtn.onclick = function() {
        // 显示相应的弹窗，根据操作结果
        alert("归还成功！");
    };
</script>

</body>
</html>